<!DOCTYPE html>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Simple Test</title>
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  
  <link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../jquery-1.4.4.min.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.js"></script>
  <!-- END: load jqplot -->

<style type="text/css">

.plot {
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

#chart0 .jqplot-meterGauge-label {
    font-size: 10pt;
}

#chart1 .jqplot-meterGauge-tick {
    font-size: 6pt;
}

#chart2 .jqplot-meterGauge-tick {
    font-size: 8pt;
}

#chart3 .jqplot-meterGauge-tick, #chart0 .jqplot-meterGauge-tic {
    font-size: 10pt;
}

#chart4 .jqplot-meterGauge-tick, #chart4 .jqplot-meterGauge-label {
    font-size: 12pt;
}

#chart5 .jqplot-meterGauge-tick, #chart5 .jqplot-meterGauge-label {
    font-size: 9pt;
}
</style>

<!-- <script type="text/javascript">
$(document).ready(function(){
      $.jqplot.config.enablePlugins = true;

   s1 = [1];

   plot0 = $.jqplot('chart0',[s1],{
       title: 'Network Speed',
       // title: {
       //     text: 'Network Speed',
       //     location: 'n'
       // },
       seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
               label: 'MB/s'
           }
       }
   });

   plot1 = $.jqplot('chart1',[s1],{
       seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
               showTickLabels: false,
               intervals:[2,3,4],
               intervalColors:['#66cc66', '#E7E658', '#cc6666']
           }
       }
   });

   s1 = [666];
   plot3 = $.jqplot('chart3',[s1],{
       seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
               min: 100,
               max: 500,
               intervals:[200, 300, 400, 500],
               intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666']
           }
       }
   });

   s1 = [52200];
   plot4 = $.jqplot('chart4',[s1],{
       seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
               label: 'Metric Tons per Year',
               labelPosition: 'bottom',
               labelHeightAdjust: -5,
               // intervalOuterRadius: 85,
               ticks: [10000, 30000, 50000, 70000],
               intervals:[22000, 55000, 70000],
               intervalColors:['#66cc66', '#E7E658', '#cc6666']
           }
       }
   });  
 });
</script> -->


 
<script id = "example_5" type="text/javascript">$(document).ready(function(){
   s1 = [0];
   plot5 = $.jqplot('chart5',[s1],{
       seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
               label: 'Line Chart',
               labelPosition: 'bottom',
               intervalOuterRadius: 120,
               ticks: [0, 10000, 20000, 30000, 40000, 50000],
               intervals:[10000, 40000, 50000],
               intervalColors:['#cc6666', '#E7E658', '#66cc66']
           }
       }
   });
});</script> 
<script type="text/javascript">
    $(document).ready(function(){
        
        $('#code_5').html($('#example_5').html());
        $(document).unload(function() {$('*').unbind(); });

    });
</script> 
  </head>
  <body>
<?php include "nav.inc"; ?>

<!-- <div id="chart0" class="plot" style="width:250px;height:170px;"></div>

<div id="chart1" class="plot" style="width:120px;height:70px;"></div>

<div id="chart3" class="plot" style="width:300px;height:180px;"></div>

<div id="chart4" class="plot" style="width:500px;height:300px;"></div> -->

<div id="chart5" class="plot" style="width:372px;height:225px;"></div>

    <pre id="code_5" class="code-block"></pre>
  </body>
</html>